<template>
<view>
	<!-- 导航栏 -->
	<view class="header-fit-box" :style="'padding-top: '+ StatusBar +'px;'">
		<view class="header-fit" :style="{'height':(CustomBar-StatusBar) +'px'}">
			<image @click="back" class="back" src="@/static/home/subpage/back_black.png"></image>
			<text class="text">持仓数据</text>
			<view class="item" @click="sharefix">
				<text class="li">分享</text>
			</view>
		</view>
	</view>
	<view :style="{'height':CustomBar +'px'}" style="border-bottom:2rpx solid #F6F7F9;"></view>
	<view class="nav-fix">
		<view class="nav-top">
			<view class="text">
				<text>玻璃主连</text>
				<text>1694 -0.24%</text>
			</view>
			<view class="next">
				<text>跳转分时</text>
				<image src="@/static/home/subpage/icn_right.png"></image>
			</view>
		</view>
		<view class="calendar-nav">
			<view class="prev" @click="nextCalendar(0)">上一日</view>
			<view class="rili" @click="monthCalendar">
				<image src="@/static/home/subpage/calendar.png"></image>
				<text>{{checkDateinfo}}</text>
				<image src="@/static/home/subpage/drop-down.png"></image>
			</view>
			<view class="next" @click="nextCalendar(1)">下一日</view>
		</view>
	</view>
	<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :height="scrollHeight">
			<view class="content">
				<view class="group-box">
					<view class="fit-box">
						<view class="li">
							<text>主力资金流向:</text>
							<text>主力</text>
							<text class="cl-green">净增空头</text>
							<text>，多空流向值</text>
							<text class="cl-green">98.0%</text>
						</view>
						<view class="li">
							<text>变盘风险值:</text>
							<text class="cl-green">95.9%</text>
							<text>主力多空分歧强烈，变盘风险高</text>
						</view>
					</view>
					<view class="tab-charts">
						<view class="tab">
							<image src="@/static/home/subpage/charts1.png"></image>
							<text>玻璃收盘价</text>
						</view>
						<view class="tab">
							<image src="@/static/home/subpage/charts2.png"></image>
							<text>玻璃收盘价</text>
						</view>
						<view class="tab">
							<image src="@/static/home/subpage/charts3.png"></image>
							<text>前20名净持仓(手)</text>
						</view>
						<view class="tab">
							<image src="@/static/home/subpage/charts4.png"></image>
							<text>变盘风险值</text>
						</view>
					</view>
					<view class="qiun-charts-box">
						<view class="legend">
							<text>元</text><text>手</text>
						</view>
						<view class="candle-charts">
							<l-echart ref="candleChart" @finished="candleInit"></l-echart>
						</view>
						<view class="legend" style="margin-top:32rpx">
							<text>变盘风险值</text>
						</view>
						<view class="line-charts">
							<l-echart ref="lineChart" @finished="lineInit"></l-echart>
						</view>
					</view>
					<slider-range
					  :value="[30, 90]"
					  :min="5"
					  :max="200"
					  :step="5"
						height="20"
					  :bar-height="7"
					  :block-size="16"
					  background-color="#fff"
					  active-color="#EAF0FD"
					  :format="format"
						:tipVisible="false"
					  :decorationVisible="true"
					  @change="handleRangeChange"
					></slider-range>
					<view class="moreChart">
						<text>查看其它品种龙虎榜机会</text>
						<image src="@/static/home/subpage/icn_red.png"></image>
					</view>
				</view>
				<view class="group-box">
					<view class="hot-title">
						<view class="left">
							<view class="title-text">主力席位</view>
						</view>
					</view>
					<view class="table">
						<view class="tr">
							<view class="tl">盈利席位榜</view>
							<view class="tl">净持仓</view>
							<view class="tl">持仓变化</view>
							<view class="tl">
								<text>近一年盈亏(估)</text>
								<view class="icn-right"></view>
							</view>
						</view>
						<view class="box">
							<view class="row" v-for="(item,index) in 5">
								<view class="tl">
									<view class="num">{{index>2?index+1:''}}</view>
									<text>中信期货</text>
								</view>
								<view class="tl">90121手</view>
								<view class="tl">
									<view class="sup">加空19764</view>
									<view class="sub">(-6.91亿)</view>
								</view>
								<view class="tl">6.82亿</view>
							</view>
						</view>
					</view>
				</view>
			</view>
	</mescroll-uni>

	<share-fix :isshare="isshare" :animationData="animationData" @closesharefix="closesharefix"></share-fix>
	<view class="month-modal" @touchmove.stop.prevent>
		<view class="shade" :hidden="!ismonthCalendar"></view>
		<view class="month-box" :animation="animation1Data">
			<view class="caption">
				<text>清选择日期</text>
				<image @click="closemonthCalendar" src="@/static/home/subpage/close.png"></image>
			</view>
			<view class="z-calendar-box">
				<z-calendar :showYearControl="false" v-model="checkDate" @on-selected="monthcheck"></z-calendar>
			</view>
		</view>	
	</view>
</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import * as echarts from '@/utils/echarts.min.js';	
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			animationData: {},
			animation1Data: {},
			animation:{},
			isshare: false,
			scrollHeight:'0px',
			rangeValue:[0,0],
			candleOption:{},
			lineOption:{},
			ismonthCalendar: false,
			checkDate: new Date(),
			checkDateinfo: '',
		};
	},
	onLoad(options){
			var dw = uni.getSystemInfoSync().windowWidth;
			var hw = uni.getSystemInfoSync().windowHeight;
			var scale = dw/750;
			if(dw>950) this.scrollHeight = hw-(this.CustomBar+99)+'px';
			else this.scrollHeight = hw-(this.CustomBar+(198*scale))+'px';
			
			this.checkDateinfo =this.afterTime();
	},
	onReady(){
			var animation = uni.createAnimation({
				duration: 500,
				timingFunction: 'ease',
			})
			this.animation =animation;
	},
	methods:{
		candleInit(){
			this.candleOption={
				color: 'rgba(0,0,0,0.45)',
				tooltip: {
					
				},
				grid: {
					right: '2',
					left:'4',
					top:'10',
					bottom:'10',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					axisTick: {
						show: false,
						alignWithLabel: true
					},
					axisLine: {
						show: false,
						lineStyle: {
							color: 'rgba(0,0,0,0.45)',
						}
					},
					axisLabel: {
						show: false
					},
					data: ['1','1','1','1','1','1','1','1','1']
				},
				yAxis: [
					{
						type: 'value',
						// name: '元',
						position: 'left',
						alignTicks: true,
						// offset: 80,
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							formatter: function (value, index) {
									return value;
							}
						},
					},
					{
						type: 'value',
						// name: '手',
						position: 'right',
						max:0,
						min:-140000,
						alignTicks: true,
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							formatter: '{value}'
						}
					}
				],
				series: [
					{
						type: 'candlestick',
						yAxisIndex: 0,
						barWidth :7,
						itemStyle:{
							color0:'#33C45B',
							borderColor0:'#33C45B',
							color:'#EE5953',
							borderColor:'#EE5953',
						},
						data: [
							[200, 340, 100, 380],
							[400, 350, 300, 500],
							[310, 380, 330, 440],
							[380, 150, 50, 420],
							[200, 340, 100, 380],
							[400, 350, 300, 500],
							[310, 380, 330, 440],
							[380, 150, 50, 420]
						]
					},
					{
						// name: 'Temperature',
						type: 'line',
						yAxisIndex: 1,
						data: [-10000,-10000,-20000,-30000,-40000,-40000,-80000,-70000,-100000],
						symbol: 'none',
						itemStyle:{
							color:'#356FE5'
						},
						lineStyle:{
							width:2
						},
					},
					{
						// name: 'Temperature',
						type: 'line',
						yAxisIndex: 1,
						data: [-100000,-90000,-80000,-60000,-20000,-13000,-12000,-11000,-9000],
						symbol: 'none',
						itemStyle:{
							color:'#FFA200'
						},
						lineStyle:{
							width:2
						},
					},
				]
			};
			this.$refs.candleChart.init(echarts, chart=> {
				chart.setOption(this.candleOption);
			});
		},
		lineInit(){
			this.lineOption={
				color: 'rgba(0,0,0,0.45)',
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					}
				},
				grid: {
					right: '2',
					left:'4',
					top:'10',
					bottom:'0',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						axisTick: {
							show: false,
							alignWithLabel: true
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						data: ['2023-10-25', '10-26', '10-27', '10-25', '10-25', '10-25', '10-25', '2023-10-25', '2023-10-26'],
						axisLabel: {
							show: true,
							margin: 15,
							color:'rgba(0,0,0,0.6)',
							formatter: function (value, index) {
								if(index==0||index==8) return value;
							},
							showMinLabel : true,
							showMaxLabel : true,
						},
					}
				],
				yAxis: [
					{
						type: 'value',
						// name: '元',
						position: 'left',
						alignTicks: true,
						// offset: 80,
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							formatter: function (value, index) {
									return value + '%';
							}
						},
					},
					{
						type: 'value',
						// name: '手',
						position: 'right',
						max:0,
						min:-60000,
						alignTicks: true,
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							formatter: '{value}'
						}
					}
				],
				series: [
					{
						name: 'Temperature',
						type: 'line',
						yAxisIndex: 0,
						data: [90,80,70,60,50,40,50,40,30],
						symbol: 'none',
						itemStyle:{
							color:'#A935E5'
						},
						lineStyle:{
							width:2
						},
					},
					// {
					// 	name: 'Temperature',
					// 	type: 'line',
					// 	yAxisIndex: 1,
					// 	data: [-10000,-10000,-20000,-30000,-40000,-40000,-40000,-40000,-40000],
					// 	symbol: 'none',
					// 	itemStyle:{
					// 		color:'#A935E5'
					// 	},
					// 	lineStyle:{
					// 		width:2
					// 	},
					// }
				]
			};
			this.$refs.lineChart.init(echarts, chart=> {
				chart.setOption(this.lineOption);
			});
		},
		back(){
			uni.navigateBack();
		},
		/*下拉刷新的回调 */
		downCallback() {
			this.mescroll.resetUpScroll()
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			setTimeout(()=>{
				this.mescroll.endSuccess(9,false);// 加载成功
			},1500)
		},
		sharefix(){
			this.isshare= true;
			this.animation.translateY(0).step();
			this.animationData = this.animation.export();
		},
		closesharefix(){
			this.isshare= false;
			this.animation.translateY("100%").step();
			this.animationData = this.animation.export();
		},
		format(val) {
			return val + '%'
		},
		handleRangeChange(e) {
			this.rangeValue = e;
			// console.log(this.rangeValue);
		},
		monthCalendar(){
			this.ismonthCalendar= true;
			this.animation.translateY(0).step();
			this.animation1Data = this.animation.export();
		},
		closemonthCalendar(){
			this.ismonthCalendar= false;
			this.animation.translateY("100%").step();
			this.animation1Data = this.animation.export();
		},
		monthcheck(){
			var curTime = new Date().getTime()/1000;
			var cheTime = this.checkDate.getTime()/1000;
			// if(cheTime>=curTime) return;
			var date = this.checkDate;
			var seperator1 = '-'
			var year = date.getFullYear()
			var month = date.getMonth() + 1
			var day= date.getDate();
			if (month >= 1 && month <= 9) {
				month = '0' + month
			}
			this.checkDateinfo = year + seperator1 + month + seperator1 + day
			this.closemonthCalendar();
		},
		// 当前年月日
		afterTime () {
			var date = new Date()
			var seperator1 = '-'
			var year = date.getFullYear()
			var month = date.getMonth() + 1
			var day= date.getDate();
			if (month >= 1 && month <= 9) {
				month = '0' + month
			}
			var endDate = year + seperator1 + month + seperator1 + day
			return endDate
		},
		// 获取前后日期
		nextCalendar(type){
			var date = this.checkDate;
			var start = date.getTime()/1000;
			if(type==1) var end = start + (60*60*24*1);
			else var end = start - (60*60*24*1);
			date = new Date(parseInt(end) * 1000);
			var seperator1 = '-'
			var year = date.getFullYear()
			var month = date.getMonth() + 1
			var day= date.getDate();
			if (month >= 1 && month <= 9) {
				month = '0' + month
			}
			var endDate = year + seperator1 + month + seperator1 + day;
			this.checkDate = date;
			this.checkDateinfo =endDate;
		},
	}
}
</script>

<style lang="scss">
page{
	background: #F4F5F7;
}	
.nav-fix{
	margin-top:8rpx;
	background-color: #fff;
	position: relative;
	z-index: 1;
	.nav-top{
		height:92rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom:2rpx solid #F6F7F9;
		padding:0 16rpx 0 24rpx;
		.text{
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
			& text:last-child{
				font-size: 32rpx;
				font-weight: bold;
				color: #33C45B;
				padding-left:16rpx;
			}
		}
		.next{
			display: flex;
			align-items: center;
			& text{
				font-size: 28rpx;
				color: rgba(0,0,0,0.6);
			}
			& image{
				width:46rpx;height:46rpx;
			}
		}
	}
	.calendar-nav{
		height:96rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 48rpx;
		.prev{
			font-size: 28rpx;
			color: rgba(0,0,0,0.8);
		}
		.rili{
			display: flex;
			align-items: center;
			& text{
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(0,0,0,0.8);
			}
			& image{
				width:64rpx;height:64rpx;
			}
			& text+image{
				width:22rpx;height:14rpx;
				margin-left:22rpx;
			}
		}
		.next{
			font-size: 28rpx;
			color: rgba(0,0,0,0.8);
		}
	}
}
.content{
	padding:24rpx 24rpx 24rpx;
	.group-box{
		margin-top:24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding:24rpx 24rpx 32rpx;
		.hot-title{
			padding-bottom:26rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				display: flex;
				align-items: center;
				.title-text{
					font-size: 32rpx;
					font-weight: bold;
					color: #000000;
					line-height: 46rpx;
				}
				& image{
					width:46rpx;height:46rpx;
				}
			}
		}
		.hot-title::after{
			content: '';
			position: absolute;
			left:0;bottom:0;
			width: 60rpx;
			height: 10rpx;
			background: linear-gradient(90deg, #FF3B30 0%, rgba(255,59,48,0) 100%);
		}
		.table{
			margin-top:10rpx;
			.tr{
				padding:26rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F4F5F7;
				.tl{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: rgba(0,0,0,0.6);
					& text{
						font-size: 24rpx;
						color: rgba(0,0,0,0.6);
					}
					.icn-right{
						width:0rpx;height:0rpx;
						border:10rpx solid transparent;
						border-left-color:#BFBFBF;
						border-left-width: 13rpx;
						margin-left:4rpx;
					}
				}
				.tl:nth-child(3){
					padding-right:10rpx;
				}
			}
			.box{
				.row{
					padding:24rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #F4F5F7;
					.tl{
						display: flex;
						align-items: center;
					}
					.tl:nth-child(1){
						.num{
							width:48rpx;height:48rpx;
							text-align: center;
							line-height: 48rpx;
							font-size: 28rpx;
							color: rgba(0,0,0,0.8);
						}
						& text{
							font-size: 28rpx;
							color: #356FE5;
						}
					}
					.tl:nth-child(2){
						font-size: 28rpx;
						color: rgba(0,0,0,0.8);
					}
					.tl:nth-child(3){
						flex-direction: column;
						justify-content: flex-start;
						align-items: flex-end;
						.sup{
							font-size: 28rpx;
							color: rgba(0,0,0,0.8);
						}
						.sub{
							font-size: 20rpx;
							color: rgba(0,0,0,0.4);
						}
					}
					.tl:nth-child(4){
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(0,0,0,0.8);
					}
				}
				.row:nth-child(1){
					.num{
						background-image: url('@/static/home/subpage/no1.png');
						background-position: center;
						background-size: cover;
						color:#fff;
					}
				}
				.row:nth-child(2){
					.num{
						background-image: url('@/static/home/subpage/no2.png');
						background-position: center;
						background-size: cover;
						color:#fff;
					}
				}
				.row:nth-child(3){
					.num{
						background-image: url('@/static/home/subpage/no3.png');
						background-position: center;
						background-size: cover;
						color:#fff;
					}
				}
			}
			.tl:nth-child(1){
				width:25%;
				justify-content: flex-start;
			}
			.tl:nth-child(2){
				width:21%;
				justify-content: flex-end;
			}
			.tl:nth-child(3){
				width:27%;
				justify-content: flex-end;
			}
			.tl:nth-child(4){
				width:27%;
				justify-content: flex-end;
			}
		}
		.fit-box{
			padding:24rpx;
			background: rgba(51,196,91,0.04);
			border-radius: 8rpx;
			.li{
				& text{
					font-size: 24rpx;
					color: #000;
					font-weight: bold;
				}
				& text:first-child{
					font-size: 24rpx;
					color: rgba(0,0,0,0.4);
					font-weight: 400;
				}
				.cl-green{
					color: #33C45B;
				}
			}
			.li:last-child{
				margin-top:16rpx;
			}
		}
		.tab-charts{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.tab{
				display: flex;
				align-items: center;
				margin-top:16rpx;
				& text{
					font-size: 24rpx;
					color: rgba(0,0,0,0.6);
				}
				& image{
					width:48rpx;height:48rpx;
				}
			}
		}
		.qiun-charts-box{
			.legend{
				padding:0 8rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				font-size: 24rpx;
				color: rgba(0,0,0,0.6);
				margin-top:16rpx;
			}
			.candle-charts{
				width:654rpx;
				height:400rpx;
				margin-top:16rpx;
			}
			.line-charts{
				width:654rpx;
				height:260rpx;
				margin-top:24rpx;
			}
		}
		.moreChart{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #EE5953;
			margin-top:10rpx;
			& image{
				width: 46rpx;
				height:46rpx;
			}
		}
	}
	.group-box:first-child{
		margin-top:0;
	}
}
.month-modal{
	.month-box{
		position: fixed;
		left:0;bottom:0;
		width:100%;
		box-sizing: border-box;
		transform: translateY(100%);
		z-index: 100;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0px 0px;
		overflow: hidden;
		.caption{
			height:114rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
			position: relative;
			line-height: 114rpx;
			& image{
				width: 96rpx;
				height: 96rpx;
				position: absolute;
				right:0;bottom:0;
			}
		}
		.z-calendar-box{
			padding:24rpx;
		}
	}
}
</style>
